<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<image src="/static/icon/left.png" mode="aspectFill"></image>
				<!-- <u-icon name="arrow-left" color="#fff" size="34"></u-icon> -->
			</view>
			<view class="r-name">个人信息</view>
		</view>
	</Nav>
	<view :style="{ marginTop: navHeiht + 'px' }">
		<view class="content p-32">
			<view class="form">
				<view class="form-item dispaly-just-between">
					<view class="left f-2">身高</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">体重</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">肩宽</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">胸围</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">腰围</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">胯围</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">臀围</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">胸高</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">腰线高</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">手臂长</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">胳膊肘长</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">大臂围长</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">手腕围长</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">脖围</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">裙长到膝盖</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item dispaly-just-between">
					<view class="left f-2">裙长到脚背</view>
					<view class="right f-4">
						<input type="number" placeholder="请输入" />
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="bottom-btn-box dispaly-align-center">
		<view class="bottom-btn dispaly-align-center">保存</view>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getElementHeight } from '@/utils/util';
// 获取元素高度
const navHeiht = ref(0);
onMounted(async () => {
	const res = await getElementHeight('.f');
	navHeiht.value = res;
});
</script>

<style lang="scss" scoped>
.home-content {
	margin: 0 32rpx;
}

.tag {
	margin-right: 10rpx;
}

.r-name {
	color: #020121;
}

.title {
	.icon {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}
.form {
	padding-bottom: 130rpx;
	.form-item:last-child {
		margin-bottom: 0;
	}
	.form-item {
		background: #f4f6f8;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 16rpx;
		.left {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 32rpx;
			color: #020121;
		}
		.right {
			input {
				text-align: right;
			}
		}
	}
}
.bottom-btn-box {
	height: 120rpx;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16rpx 32rpx;
	.bottom-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(138deg, #7b7b89 0%, #020121 100%);
		border-radius: 60rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
	}
}
</style>
<style>
page {
	background-color: #fff;
}
</style>
